<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>3.新闻comuted版本</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../../js/vue.js"></script>
        <script src="./new.js"></script>
        <link rel="stylesheet" href="./news.css">
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app" class="News">
            <input type="search" v-model="search" />
            <ul >
                  <li v-for="(item,index) in news2"  class='News'>
                <p class='p1'>{{index+1}}</p>
                <a href="#">{{item.title}}</a> 
               <p class='p2'>{{item.hot}}</p>                   
            </li>   
            </ul>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        new Vue({
            el:"#app",
            data:{
                news:news,
                search: "",
            },
            computed:{
                news2(){
                    return this.news.filter(item=>(item.title.indexOf(this.search)!==-1))
                },
              
            }
        })
        
        
    </script>
</html>